<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="部门名称">
        <el-input v-model="formInline.deptName" placeholder="请输入部门名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="请选择状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="success" @click="importExcel">导入Excel</el-button>
        <el-button type="success" @click="exportExcel">导出Excel</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border row-key="id" :default-expand-all="true">
      <el-table-column prop="deptName" label="部门名称"></el-table-column>
      <el-table-column prop="orderNum" label="排序"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="updateOpen(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="saveOpen(scope.row.deptName)" type="text" size="small">新增</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="部门管理" :visible.sync="dialog">
      <el-form :model="form" label-width="100px" :rules="rules" ref="form">
        <el-form-item label="上级部门">
          <el-cascader v-model="form.parentId" :options="tableData" :style="{width: '100%'}"
                       :props="{expandTrigger:'click',checkStrictly: true,value:'id',label: 'deptName',children:'children'}"></el-cascader>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="form.deptName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="phone">
          <el-input v-model="form.orderNum" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" prop="leader">
          <el-input v-model="form.leader" placeholder="请输入部门负责人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="紧急邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入紧急邮箱"></el-input>
        </el-form-item>
        <el-form-item label="部门状态" prop="status">
          <template>
            <el-radio v-model="form.status" label="0">正常</el-radio>
            <el-radio v-model="form.status" label="1">停用</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog= false">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {name: ""},
      tableData: [],
      form: {controls: 0},
      dialog: false,
      rules: {
        parent: [
          {required: true, message: '请选择上级部门', trigger: 'blur'},
        ], status: [
          {required: true, message: '请选择部门状态', trigger: 'change'},
        ], deptName: [
          {required: true, message: '请输入部门名称', trigger: 'blur'},
        ], leader: [
          {required: true, message: '请输入部门负责人', trigger: 'blur'},
        ], phone: [
          {required: true, message: '请输入联系方式', trigger: 'blur'},
        ], code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ], email: [
          {required: true, message: '请输入紧急邮箱', trigger: 'blur'},
        ],
      },
    }
  }, methods: {
    list() {
      this.$axios.post('http://localhost:8090/system/dept/list', this.formInline).then(res => {
        this.tableData = res.data;
      })
    }, query() {
      this.$axios.post('http://localhost:8090/system/dept/query', this.formInline).then(res => {
        this.tableData = res.data;
      })
    }, updateOpen(row) {
      this.form = row;
      this.form.controls = 1;
      this.dialog = true;
    }, saveOpen() {
      this.form = {};
      this.form.controls = 2;
      this.dialog = true;
    }, submit(formName) {
      this.$refs[formName].validate((valid) => {
            if (valid) {
              if (this.form.controls === 1) {
                this.$axios.post('http://localhost:8090/system/dept/update', this.form).then(() => {
                  console.log(JSON.stringify(this.form))
                  this.$message.success("更新成功")
                  this.dialog = false;
                })
              }
              if (this.form.controls === 2) {
                this.$axios.post('http://localhost:8090/system/dept/save', this.form).then(() => {
                      this.$message.success("新增成功")
                      this.dialog = false;
                    }
                )
              }
            } else {
              return false;
            }
          }
      )
    }, importExcel() {

    }, exportExcel() {
      location = "http://localhost:8090/system/dept/exportExcel";
    }
  },
  created() {
    this.list();
  }
}
</script>